/* hook组件 useState */
import React, {useState, useReducer} from "react"
import {Button} from "antd"

/*
*   useState: React Hook 函数之一,目的是在函数组件中使用状态,并且后期基于状态的修改,可以让组件更新
*      + let [num, setNum] = useState(initialValue)
*      + 执行这个方法,返回结果是一个数组:[状态值, 修改状态的方法]
*      + 执行 setNum(value) 修改状态值未value  通知视图更新
*   函数组件(或 hooks组件) 不是类组件,所以没有实例的概念(调用组件不再是创建类的实例,而是把函数执行,产生一个上下文而已),
*   在所以,在函数组件中不涉及 this 的处理 (undefined)
* */


// 使用 useSate

// const Demo = function Demo() {
//     console.log(this, 11) // undefined
//     let [num, setNum] = useState(0)
//     // const handle = () => {
//     //     setNum(num + 1)
//     // }
//     return <div className="demo">
//         <span className="num">{num}</span>
//         <Button type="primary" size="small" onClick={()=>setNum(num + 1)}>新增</Button>
//         <Button type="primary" size="small" onClick={()=>setNum(num - 1)}>减少</Button>
//     </div>
// }

// 使用 useReducer
const initialSate = {
    num: 0
}

const reducer = function (state, action) {
    state = {...state} // 数据更新，查询渲染组件
    switch (action.type) {
        case "plus":
            state.num++
            break
        case "minus":
            state.num--
            break;
    }
    console.log(state,222)
    return state;
}

const Demo = function () {
    let [state, dispatch] = useReducer(reducer, initialSate)
    return <div className="demo">
        <span className="num">{state.num}</span>
        <Button type="primary" size="small" onClick={() => dispatch({type: 'plus'})}>新增</Button>
        <Button type="primary" size="small" onClick={() => dispatch({type: 'minus'})}>减少</Button>
    </div>
}

export default Demo

/*
*   useReducer
*   普通需求处理的时候，基本都是useState直接处理，不会使用useReducer
*   但是如果一个组件的逻辑很复杂，需要大量的状态，此时使用useReducer管理好一些
*   @1  不需要在基于 useSate 一个个去创建状态了
*   @2  所有状态的逻辑，全部统一处理了
* */

